import React, { Component } from 'react'

export class Categories extends Component {
    constructor(props) {
        super(props)
        this.state = {
            categories: [
                {
                    key: '35',
                    name: '35'
                },
                {
                    key: '36',
                    name: '36'
                },
                {
                    key: '37',
                    name: '37'
                },
                {
                    key: '38',
                    name: '38'
                },
                {
                    key: '39',
                    name: '39'
                },{
                    key: '40',
                    name: '40'
                },
                {
                    key: '41',
                    name: '41'
                },
                {
                    key: '42',
                    name: '42'
                },
                {
                    key: '43',
                    name: '43'
                }
            ]
        }
    }
  render() {
    return (
        <div className='categories'>
            <div className='categories_container'>
            <p className='heading_category'>Подбор по параметрам</p>
            <form className='checkboxes'>
                <input type='checkbox' className='checkbox' placeholder='мужской'/>
                <p>мужской</p>
                <input type='checkbox' />
                <p>женский</p>
            </form>
            <p>Размер</p>
            <div className='sizes' >
                {this.state.categories.map(el => (
                <div className='size_category' key={el.key} onClick={() => this.props.chooseCategory(el.key)}>{el.name}</div>
                ))}
            </div>
            <button id='reset' className='reset_button' onClick={() => this.props.resetCategories('reset')}>сбросить</button>
            </div>
        </div>
    )
  }
}

export default Categories